<template>
    <PageWrapper title="评论列表">
        <div class="content p-4">
            <BasicTable @register="registerTable">
                <Spin :spinning="loading" tip="加载中..." />
                <template #uid="{ text }">
                    {{ text?.username }}
                </template>
                <template #object="{ text }">
                    {{ text?.title ?? '' }}
                </template>
                <!-- 性别 -->
                <template #parentId="{ text }">
                    <Tag v-if="text === null" color="volcano">1</Tag>
                    <Tag v-else color="red">2</Tag>
                </template>
                <!-- 时间 -->
                <template #createdAt="{ text }">
                    {{ text.substring(0, 10) }}
                </template>
                <!-- 操作 -->
                <template #action="{ record }">
                    <TableAction
                        :actions="[
                            {
                                label: '删除',
                                icon: 'noto:multiply',
                                popConfirm: {
                                    title: '确定要删除吗?',
                                    okText: '确定',
                                    cancelText: '取消',
                                    confirm: () => deleteTableEvent(record),
                                },
                            },
                        ]"
                    />
                </template>
            </BasicTable>
        </div>
    </PageWrapper>
</template>

<script lang="ts">
    import { defineComponent, ref } from 'vue'
    import { PageWrapper } from '/@/components/Page'
    import { BasicTable, useTable, TableImg, TableAction } from '/@/components/Table'
    import { Columns, FormConfig } from './model'
    import { dataListApi, deleteApi } from '/@/api/comment/index'
    import { DataListParams, DeleteParams } from '/@/api/comment/model'
    import { Avatar, Tag, Spin, message } from 'ant-design-vue'
    import { UserOutlined } from '@ant-design/icons-vue'

    export default defineComponent({
        name: 'TenantList',
        components: {
            PageWrapper,
            BasicTable,
            Avatar,
            UserOutlined,
            TableImg,
            Tag,
            TableAction,
            Spin,
        },
        setup() {
            // 表格
            const [registerTable, { reload }] = useTable({
                title: '评论列表',
                titleHelpMessage: '展示评论列表',
                canResize: true,
                bordered: true,
                rowKey: '_id',
                ellipsis: true,
                showTableSetting: true,
                columns: Columns,
                useSearchForm: true,
                formConfig: FormConfig as any,
                actionColumn: {
                    title: '操作',
                    dataIndex: 'action',
                    fixed: 'left',
                    width: 100,
                    slots: { customRender: 'action' },
                },
                api: async (data) => {
                    const res = await dataListApi(data)
                    return {
                        items: res.list,
                        total: res.count,
                    }
                },
                beforeFetch: (pageData) => {
                    console.log('页面数据', pageData)
                    const data: DataListParams = {
                        _id: pageData._id ?? '',
                        limit: pageData.pageSize,
                        page: pageData.page,
                    }
                    return data
                },
            })
            const loading = ref(false)

            const deleteTableEvent = async (v: any) => {
                loading.value = true
                const data: DeleteParams = {
                    _id: v._id,
                }
                const res = await deleteApi(data)
                loading.value = false
                console.log(res)
                if (res) {
                    message.success('删除成功!')
                    reload()
                } else {
                    message.error('删除失败!')
                }
            }

            return {
                registerTable,
                deleteTableEvent,
                loading,
            }
        },
    })
</script>

<style lang="less">
    .vben-basic-table-img.check-img {
        height: 46px !important;
        align-content: center;
        justify-content: center;

        .ant-image {
            margin: auto;

            .ant-image-img {
                width: 40px;
                height: 40px;
                object-fit: cover;
            }
        }
    }

    .unsend {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 46px;
    }
</style>
